<template>
    <div class="home-box">
        <el-table :data="tableData" border stripe>
            <el-table-column
                prop="id"
                label="No."
                :min-width="180"
            ></el-table-column>
            <el-table-column
                prop="title"
                label="标题"
                :min-width="180"
            ></el-table-column>
            <el-table-column
                prop="msg"
                label="消息"
                :min-width="180"
            ></el-table-column>
        </el-table>
        <el-pagination
            class="pagination"
            :total="total"
            :page-sizes="[5, 10, 20]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>
<script setup lang="ts">
import { HomeData, HomeSearch } from '@/api/home/types';
import { homeList } from '@/api/home/index';
defineOptions({
    name: 'Home',
});
const tableData = ref<HomeData[]>([]);
const total = ref<number>(0);
const searchData = reactive<HomeSearch>({
    pageNumber: 1,
    pageSize: 10,
    name: undefined,
});
const list = () => {
    homeList(searchData).then((res) => {
        tableData.value = res.data.rows;
        total.value = res.data.total;
    });
};
const handleSizeChange = (val: number) => {
    searchData.pageSize = val;
    list();
};
const handleCurrentChange = (val: number) => {
    searchData.pageNumber = val;
    list();
};
list();
</script>
<style lang="less" scoped>
.home-box {
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    .pagination {
        display: flex;
    }
}
</style>
